import React, { useState, useEffect } from 'react';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
import OrderStatus from './components/OrderStatus';
import OrderCrash from './components/OrderCrash';
import { history } from 'umi';
import { PageHeader, Button } from 'antd';
import './index.css';

import {
    ConnectProps,
    Loading,
    connect,
    UserModelState,
    OrderModelState,
} from 'umi';
interface OrderListProps extends ConnectProps {
    user: UserModelState;
    order: OrderModelState;
}

// api server
import { requestOrderList } from './server';
// data.d
import { Iorder } from './data';

const OrderList: React.FC<OrderListProps> = ({ user, order, dispatch }) => {
    const [orderList, setOrderList] = useState<Iorder[]>([]);
    const [loading, setLoading] = useState(false);
    // useEffect 加载时运行一次
    useEffect(() => {
        handleClickRequest();
    }, []);
    const handleClickRequest = () => {
        setLoading(true);
        requestOrderList({
            userInfo: {
                token: user.token,
                userid: user.userid,
            },
            request: {},
        }).then(res => {
            if (res.status === 0) {
                setOrderList(res.data);
            }
            setLoading(false);
        });
    };
    // Event
    const handleOrderClick = (id: string) => {
        /*
        id: 订单ID, order.id,
        */
        if (dispatch) {
            dispatch({
                type: 'order/save',
                payload: {
                    id,
                },
            });
        }
        history.push('order_detail');
    };
    return (
        <>
            <PageHeader
                title="订单列表"
                subTitle={
                    <Button
                        type="primary"
                        onClick={() => {
                            if (dispatch) {
                                dispatch({
                                    type: 'order/reset',
                                });
                            }
                            history.push('/order_new');
                        }}
                        loading={loading}
                    >
                        新建订单
                    </Button>
                }
            />
            {orderList.length > 0 &&
                orderList.map(order => {
                    return (
                        <WingBlank size="lg" key={order.id}>
                            <WhiteSpace size="lg" />
                            <Card onClick={e => handleOrderClick(order.id, e)}>
                                <Card.Header
                                    title={`维修单号:${order.id}`}
                                    extra={
                                        <span>
                                            <OrderStatus
                                                status={order.status}
                                            />
                                        </span>
                                    }
                                />
                                <Card.Body>
                                    <div>{order.location}</div>
                                    <div>{order.content}</div>
                                </Card.Body>
                                <Card.Footer
                                    content={'通知时间: ' + order.notice_time}
                                    extra={
                                        <div>
                                            <OrderCrash crash={order.crash} />
                                        </div>
                                    }
                                />
                            </Card>

                            <WhiteSpace size="lg" />
                        </WingBlank>
                    );
                })}
        </>
    );
};

export default connect(
    ({ user, order }: { user: UserModelState; order: OrderModelState }) => ({
        user,
        order,
    }),
)(OrderList);
